<template>
  <el-button type="primary" @click="visibleAdd = true">新建项目或组件</el-button>
  <el-card shadow="never" style="margin-top: 10px;">

    <!-- 查询区域 -->
    <el-card shadow="never" style="margin: 10px 0;">
      <el-form :model="search">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="搜索与我相关的项目:">
              <el-input v-model="search.name" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: right;">
        <el-button type="primary" @click="Searchfile()">查询</el-button>
        <el-button @click="resetSearch()">重置</el-button>
      </div>
    </el-card>

    <div>
      <h2>与我相关的项目</h2>
    </div>
    <!-- 表格区域 -->
    <el-table :data="tableData" stripe>
      <el-table-column prop="projectCode" label="项目/组件码"  />
      <el-table-column prop="filename" label="项目/组件名称" />
      <el-table-column prop="CID" label="CID" />
      <el-table-column prop="timestamp" label="上传时间" />
      <el-table-column prop="version" label="版本号" />
      <el-table-column prop="upCIDS" label="一级上游"  />
      <el-table-column prop="poisonExist" label="是否威胁" />
      <el-table-column prop="poisonUp" label="威胁源" />
      <el-table-column prop="poison" label="威胁名称" />

    </el-table>
    <!-- 分页 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      layout="sizes, total, prev, pager, next" :total="totalNum" :currentPage="search.pageNum"
      :pageSize="search.pageSize">
    </el-pagination>
  </el-card>

  <!-- 新增抽屉 -->
  <sDrawer v-model="visibleAdd" :title="'新建项目或组件'" size="35%" :close-on-click-modal="false">

    <el-form :model="form" label-width="100px" ref="ruleFormRef">
      <el-form-item label="版本号:">
        <el-input v-model="form.version" />
      </el-form-item>
      <el-form-item label="一级上游:">
           <el-input v-model="form.up_CIDS" />
      </el-form-item>
    </el-form>

    <el-form :model="form" label-width="80px" ref="ruleFormRef">
    <el-form-item label="项目文件:" prop="file">
        <el-upload
          class="upload-demo"
          action="#"
          :before-upload="handleFileChange"
          :on-success="handleSuccess1"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
        >
      <el-button type="primary" size="mini">上传文件</el-button>
      </el-upload>
    </el-form-item>
    </el-form>



    <template #footer>
      <el-button @click="visibleAdd = false">取消</el-button>
      <el-button type="primary" @click="saveData()">确定</el-button>
    </template>
  </sDrawer>

</template>

<script>
import sDrawer from "@/components/s-drawer/s-drawer.vue"

export default {
  components: {
    sDrawer,
  },
  watch: {
    visibleAdd(value) {
      if (!value) {
        this.form = {
          name: "",
          version: "",
          upstreams: "",
        };
      }
    },
  },
  data() {
    return {
        form: {
          version: "",
          up_CIDS: "",
          userid:"",
          username:"",
          file: null,
          fileURL: "",
        },
        visibleAdd: false,
        tableData: [],
        total: 0,
        totalNum: 100,
        search: {
            token:"",
            name:"",
            pageNum: 1,
            pageSize: 10,
        },
    };
  },
  created() {
    this.search.token = localStorage.getItem("token");
    this.form.userid = localStorage.getItem("user_id");
    this.form.username = localStorage.getItem("username");
    this.getList();
    // this.fetchData();
  },
  methods: {
    async fetchData(){
      this.search.userid = localStorage.getItem('user_id');
      const res = await this.$request.get(
        "/search_own/",
        { params: this.search }
      );

      if (res.data.code === 200) {
        console.log(res.data)
        this.tableData = res.data.data;
        this.totalNum = res.data.zs;
        this.$notify.success(res.data.message)
      }
    },
    async getList(){
      this.search.userid = localStorage.getItem('user_id');
      const res = await this.$request.get(
        "/search_own/",
        { params: this.search }
      );

      if (res.data.code === 200) {
        console.log(res.data)
        this.tableData = res.data.data;
        this.totalNum = res.data.zs;
        this.$notify.success(res.data.message)
      }

    },
     async Searchfile(){
       this.search.userid = localStorage.getItem('user_id');
      const res = await this.$request.get(
        "/search_file/",
        { params: this.search }
      );
      if (res.data.code === 200) {
        console.log(res.data)
        this.tableData = res.data.data;
        this.totalNum = res.data.zs;
        this.$notify.success(res.data.message)
      }
    },

    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.search.pageSize = val;
      this.getList();
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.search.pageNum = val;
      this.getList();
    },
    resetSearch() {
      let search = {
        name:"",
        pageNum: this.search.pageNum,
        pageSize: this.search.pageSize,
      };
      this.search = search;
      this.fetchData();
      this.$notify.success(res.data.message)
    },
    handleFileChange(file) {
      console.log(file)
      // 处理文件信息
      this.form.file = file;
      this.form.fileUrl = URL.createObjectURL(file);
      this.$notify.success('文件已选择');
  },

    async saveData() {
          const res = await this.$request.post('/filePost/owner/', this.form,{
             headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.getList();
              this.visibleAdd = false

            // 在成功保存数据后自动刷新页面
              location.reload();

            }else if (res.data.code === 500) {
              this.$message.error("发生服务器错误，请重试！");
            }else if(res.data().code === 400){
             this.$message.error("相同CID的文件已经存在！");
            }else if(res.data().code === 401){
             this.$message.error("文件等数据读取错误,请重新登录");
            }
    },

    // 照片文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$notify.warning({
      title: '警告',
      message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
      })
    },
    handleSuccess1(res) {
        console.log(res.data,'777777777777777777777777777777777777777')
        this.form.fileURL = res.data.file
        this.dialogImageUrl = ''
        this.$message.success({
            title: '通知',
            type: 'success',
            duration: 5000
      })
    },


  },
};
</script>

<style scoped>
.el-pagination {
  margin-top: 10px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0px;
}
</style>